<template>
  <div>
    <div class="banner" @click="handleBannerClick">
      <img class="banner-image" :src="bannerImage" />
      <div class="banner-info">
        <div class="banner-number">
          <span class="iconfont">&#xe60b;</span>
          <span>{{ galleryImages.length }}</span>
        </div>
        <div class="banner-title">{{ sightName }}</div>
      </div>
    </div>
    <common-fade>
      <common-gallery
        :imgs-list="galleryImages"  
        v-show="isGalleryShow" 
        @closeGallery="handleGalleryClose">
      </common-gallery>
    </common-fade>
  </div>
</template>

<script>
import CommonGallery from "common/gallery/Gallery";
import CommonFade from "common/fade/Fade";

export default {
  name: "DetailBanner",
  props: {
    sightName: String,
    bannerImage: String,
    galleryImages: Array
  },
  components: {
    "common-gallery": CommonGallery,
    "common-fade": CommonFade
  },
  data: function() {
    return {
      isGalleryShow: false
    };
  },
  methods: {
    handleBannerClick: function() {
      this.isGalleryShow = true;
    },
    handleGalleryClose: function() {
      this.isGalleryShow = false;
    }
  },
  mounted: function() {}
};
</script>

<style lang='stylus' scoped>
.banner {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 55%;
  background-color: #eee;
}

.banner .banner-image {
  width: 100%;
}

.banner .banner-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  line-height: 0.6rem;
  padding: 0 0.2rem 0.2rem;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.6)
  );
}

.banner .banner-info .banner-number {
  width: 1.2rem;
  height: 0.4rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.2rem;
  font-size: 0.24rem;
  color: #fff;
  line-height: 0.4rem;
  text-align: center;
}

.banner .banner-info .banner-number span {
  vertical-align: middle;
}

.banner .banner-info .banner-title {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.36rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
</style>